<template>
	<view class="page">
		<view class="topcontent">
			<!-- 导航 TODO -->
			<!-- <view>
				<view class="u-navbar u-navbar-fixed" style="z-index: 980;">
					<view class="u-status-bar" style="height: 0px;"></view>
					<view class="u-navbar-inner" style="height: 40px;width: 400px; background-color: #C0C0C0;">

					</view>
				</view>
			</view> -->
			<!-- 内容  -->
			<div class="content">
				<div class="top">
					<image :mode="aspectFit" src="http://47.110.68.119/web/static/homedetail/shang.png"></image>
				</div>
				<div class="bottom">
					<image :mode="aspectFit" src="http://47.110.68.119/web/static/homedetail/shang.png"></image>
				</div>
				<div class="left">
					<image :mode="aspectFit" src="http://47.110.68.119/web/static/homedetail/shang.png"></image>
				</div>
				<div class="right">
					<image :mode="aspectFit" src="http://47.110.68.119/web/static/homedetail/shang.png"></image>
				</div>
				<div class="front">
					<image :mode="aspectFit"
						src="https://linglushucang.oss-cn-beijing.aliyuncs.com/uploads/20220414/1a6fdcae4028e903f5a02de12999042d.png">
					</image>
				</div>
				<div class="after">
					<image :mode="aspectFit" src="http://47.110.68.119/web/static/homedetail/hou.png"></image>
				</div>
			</div>
			<view class="imgsbgc">
				<image :mode="aspectFit" src="http://47.110.68.119/web/static/homedetail/detailbottom.png"></image>
			</view>
			<view class="name">
				<image :mode="aspectFit" src="http://47.110.68.119/web/static/homedetail/lefttips.png"></image>
				<text>神剑无名</text>
				<image :mode="aspectFit" src="http://47.110.68.119/web/static/homedetail/righttips.png"></image>
			</view>
			<view class="xianliang">
				<text>限量</text>
				<text>9999</text>
			</view>
			<view class="xianliang xianliang1">
				<text>限量</text>
				<text>9999</text>
			</view>

		</view>
		<view class="titleline">
			<view class="line"></view>
			<view class="time">购买后即可体验内容</view>
			<view class="line"></view>
		</view>
		<view class="detaimcontent">
			<view class="detaimcontent_header">
				<image :mode="aspectFit" class="img"
					src="https://linglushucang.oss-cn-beijing.aliyuncs.com/uploads/20220413/9959277243a1823ba831708213f0a43e.png">
				</image>
				<view class="text">
					<text class="text1">追鹿</text>
					<text class="text2">追鹿xxx</text>
				</view>
			</view>
			<view class="detaimcontent_title">
				<text>作品简介</text>
			</view>
			<view class="addcontent">
				<view class="detaimcontent_main">
					<image :mode="aspectFit"
						src="https://linglushucang.oss-cn-beijing.aliyuncs.com/uploads/20220414/1a6fdcae4028e903f5a02de12999042d.png">
					</image>
				</view>
				<view class="imgtitle">龙龙--xxx</view>
				<view class="detaimcontent_main_out" style="border-color: rgb(253, 249, 220);">
					<text style="color: rgb(253, 249, 220);">
						灵鹿是由一群高学历高追求不甘平庸有 理想有抱负的年轻人联合发起，他们热爱祖国，热爱和平，热爱中国五千年古老文化，为中华的崛起而奋斗。他们爱著作爱唱歌爱运动爱一切美好的新鲜事物。
						<br>未来2年灵鹿的发展规划是喜人的，是让所有团队成员喜极而泣的，灵鹿将打造线下体验馆(灵鹿艺术会展中心)你可以看到线上藏品真正落地于实体，该会展中心会有娱乐，健身，餐饮，舞台等等，而你拥有的一张灵鹿数字藏品就是这个展馆的门票，线上APP也会继续赋能开通聊天，建群，原创音乐，原创绘画等板块，敬请期待！
					</text>
					<view class="detaimcontent_main1" style="background-color: rgb(253, 249, 220);">作者简介</view>
				</view>
				<view class="detaimcontent_main_out detaimcontent_main_out1" style="border-color: rgb(253, 249, 220);">
					<text style="color: rgb(253, 249, 220);">
						白日依山尽，</br>
						黄河入海流。</br>
						欲穷千里目，</br>
						更上一层楼。</br>
					</text>
					<view class="detaimcontent_main1" style="background-color: rgb(253, 249, 220);">作品简介</view>
				</view>
			</view>
			<view class="detaimcontent_footer">
				<text>发行方</text>
				<text>追鹿</text>
			</view>
		</view>
		<view class="goumaixuzhi">
			<view class="title">购买须知</view>
			<view class="content01">数字藏品为虚拟数字商品，具有唯一性，一经售出，不支持退换。请勿对数字藏品进行炒作，欺诈，或以其他非法方式进行使用。实体商品或赠品如果缺失，请联系客服进行解决。</view>
		</view>
		<view class="goumai">
			<view class="price">￥8.80</view>
			<view class="btn btn1">待开售</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				scrollFlag: true,
				autoplay: true,
				interval: 2000,
				currentTab: 0,
				scrollTop: 0
			}
		},
		onLoad() {

		},
		methods: {
			changeScrollClass(index) {
				this.scrollFlag = !this.scrollFlag;
				this.currentTab = index
			}
		}
	}
</script>

<style>
	uni-view,
	uni-text {
		box-sizing: border-box;
	}

	uni-page-body {
		height: 100%;
		background: #f2f2f2;
	}

	uni-page-body {
		color: #303133;
		font-size: 14px;
	}

	.page {
		background: #011036;
		padding-bottom: 78px;
	}

	.page .topcontent {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 390px;
		background: url(/static/homedetail/detailbgc.png) no-repeat 100% 100%;
	}

	.page .content {
		width: 200px;
		height: 200px;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		/* transform: rotateX(-30deg) rotateY(-80deg); */
		position: relative;
		margin-top: 20px;
		z-index: 999;
		/* animation: rotate linear 20s infinite; */
		-webkit-animation: crate-spin-data-v-47e84873 10s linear infinite !important;
		animation: crate-spin-data-v-47e84873 10s linear infinite;
	}

	@-webkit-keyframes crate-spin-data-v-47e84873 {
		from {
			-webkit-transform: rotateX(-20deg) rotateY(0deg);
			transform: rotateX(-20deg) rotateY(0deg)
		}

		to {
			-webkit-transform: rotateX(-20deg) rotateY(-1turn);
			transform: rotateX(-20deg) rotateY(-1turn)
		}
	}

	@keyframes crate-spin-data-v-47e84873 {
		from {
			-webkit-transform: rotateX(-20deg) rotateY(0deg);
			transform: rotateX(-20deg) rotateY(0deg)
		}

		to {
			-webkit-transform: rotateX(-20deg) rotateY(-1turn);
			transform: rotateX(-20deg) rotateY(-1turn)
		}
	}

	.page .content .top {
		-webkit-transform: rotateX(90deg) translateZ(10px);
		transform: rotateX(90deg) translateZ(10px);
		width: 200px;
		height: 20px;
	}

	.page .content .top uni-image {
		width: 200px;
		height: 20px;
	}

	.page .content div {
		width: 200px;
		height: 200px;
		position: absolute;
	}

	.page .content .bottom {
		-webkit-transform: rotateX(-90deg) translateZ(190px);
		transform: rotateX(-90deg) translateZ(190px);
		width: 200px;
		height: 20px;
	}

	.page .content .bottom uni-image {
		width: 200px;
		height: 20px;
	}

	.page .content .left {
		-webkit-transform: rotateY(-90deg) translateZ(10px);
		transform: rotateY(-90deg) translateZ(10px);
		width: 20px;
		height: 200px;
	}

	.page .content .left uni-image {
		width: 20px;
		height: 200px;
	}

	.page .content .right {
		-webkit-transform: rotateY(90deg) translateZ(190px);
		transform: rotateY(90deg) translateZ(190px);
		width: 20px;
		height: 200px;
	}

	.page .content .right uni-image {
		width: 20px;
		height: 200px;
	}

	.page .content .front {
		-webkit-transform: rotateY(0deg) translateZ(10px);
		transform: rotateY(0deg) translateZ(10px);
	}

	.page .content .after {
		-webkit-transform: translateZ(-10px) rotateY(180deg);
		transform: translateZ(-10px) rotateY(180deg);
	}

	.page .content .after uni-image {
		width: 200px;
		height: 200px;
	}

	.page .content div uni-image {
		width: 200px;
		height: 200px;
	}

	.page .imgsbgc {
		margin-top: 18px;
		width: 212px;
		height: 70px;
	}

	.page .imgsbgc uni-image {
		width: 100%;
		height: 100%;
	}

	uni-image {
		width: 320px;
		height: 240px;
		display: inline-block;
		overflow: hidden;
		position: relative;
	}

	.page .name {
		margin-top: 20px;
	}

	.page .name uni-image {
		width: 48px;
		height: 24px;
		vertical-align: middle;
	}

	.page .name uni-text {
		font-size: 20px;
		font-family: PingFang SC Bold, PingFang SC Bold-Bold;
		font-weight: 700;
		text-align: center;
		color: #fff;
		margin: 0 15px;
	}

	.page .xianliang {
		margin-top: 15px;
		height: 18px;
		line-height: 18px;
	}

	.page .xianliang uni-text:nth-child(1) {
		width: 34px;
		height: 18px;
		line-height: 18px;
		background: linear-gradient(#ffce26, #e57410);
		border-radius: 3px 0px 0px 3px;
		font-size: 12px;
		font-family: PingFang SC Medium, PingFang SC Medium-Medium;
		font-weight: 500;
		text-align: center;
		color: #222;
	}

	.page .xianliang uni-text {
		display: inline-block;
	}

	.page .xianliang uni-text:nth-child(2) {
		width: 59px;
		height: 18px;
		background: hsla(0, 0%, 100%, .2);
		border-radius: 0 3px 3px 0;
		font-size: 12px;
		font-family: PingFang SC Medium, PingFang SC Medium-Medium;
		font-weight: 500;
		text-align: center;
		color: #fbc223;
	}

	.page .xianliang1 uni-text:nth-child(1) {
		background: #999 !important;
	}

	.page .titleline {
		width: 100%;
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page .titleline .line {
		width: 104px;
		height: 0.5px;
		opacity: .3;
		background: #fff;
		border-radius: 0.5px;
	}

	.page .titleline .time {
		margin: 0 10px;
		font-size: 13px;
		font-family: PingFang SC Bold, PingFang SC Bold-Bold;
		font-weight: 500;
		text-align: center;
		color: #999;
	}

	.page .titleline .line {
		width: 104px;
		height: 0.5px;
		opacity: .3;
		background: #fff;
		border-radius: 0.5px;
	}

	.page .detaimcontent {
		margin: 0 15px;
		width: 358px;
		background: #142349;
		border-radius: 15px;
	}

	.page .detaimcontent .detaimcontent_header {
		width: 100%;
		height: 72px;
		display: flex;
		align-items: center;
		padding-left: 15px;
		border-bottom: 0.5px solid #2e3c5c;
	}

	.page .detaimcontent .detaimcontent_header .img {
		width: 36px;
		height: 36px;
		border-radius: 50%;
	}

	.page .detaimcontent .detaimcontent_header .text {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
	}

	.page .detaimcontent .detaimcontent_header .text .text1 {
		font-size: 12px;
		text-align: left;
		color: #999;
		margin-bottom: 3px;
	}

	.page .detaimcontent .detaimcontent_header .text .text2 {
		font-size: 14px;
		text-align: left;
		color: #fff;
	}

	.page .detaimcontent .detaimcontent_title {
		font-size: 18px;
		font-family: PingFang SC Bold, PingFang SC Bold-Bold;
		font-weight: 700;
		text-align: center;
		color: #fff;
		margin: 20px 0;
	}

	.page .detaimcontent .addcontent {
		margin: 0 15px;
		padding: 15px;
		width: 327px;
		background: #3462a1;
		border-radius: 31px;
	}

	.page .detaimcontent .detaimcontent_main {
		width: 327px;
		border-radius: 26px;
	}

	.page .detaimcontent .detaimcontent_main uni-image {
		width: 296px;
		border-radius: 26px;
	}

	.page .detaimcontent .imgtitle {
		width: 100%;
		height: 20px;
		line-height: 20px;
		font-size: 20px;
		font-family: FZYiHei-M20S Regular, FZYiHei-M20S Regular-Regular;
		font-weight: 400;
		text-align: center;
		color: #c7d4e0;
		margin-top: 20px;
		margin-bottom: 37px;
	}

	.page .detaimcontent .detaimcontent_main_out {
		margin-top: 20px;
		width: 296px;
		padding: 15px;
		padding-top: 31px;
		box-sizing: border-box;
		background: #3462a1;
		border: 0.5px solid #dedadd;
		border-radius: 31px;
		position: relative;
	}

	.page .detaimcontent .detaimcontent_main1 {
		position: absolute;
		top: -40px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 67px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		margin: 26px auto;
		font-size: 14px;
		font-weight: 700;
		color: #1b284a;
	}

	.page .detaimcontent .detaimcontent_main1:before {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		right: 67px;
		border-width: 15px 18px;
		border-style: solid;
		border-color: transparent #fdf9dc transparent transparent;
	}

	.page .detaimcontent .detaimcontent_main1:after {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		left: 67px;
		border-width: 15px 18px;
		border-style: solid;
		border-color: transparent transparent transparent #fdf9dc;
		top: 0;
	}
	.page .detaimcontent .detaimcontent_main_out1 {
	    margin-top: 36px;
	}
	.page .detaimcontent .detaimcontent_footer {
	    height: 41px;
	    margin: 0 15px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 12px;
	    color: #fff;
	}
	.page .goumaixuzhi {
	    margin: 15px;
	    width: 358px;
	    padding: 20px;
	    background: #142349;
	    border-radius: 15px;
	}
	.page .goumaixuzhi .title {
	    width: 100%;
	    font-size: 18px;
	    font-family: PingFang SC Bold,PingFang SC Bold-Bold;
	    font-weight: 700;
	    text-align: center;
	    color: #fff;
	    margin-bottom: 10px;
	}
	.page .goumaixuzhi .content01 {
	    font-size: 12px;
	    font-family: PingFang SC Medium,PingFang SC Medium-Medium;
	    text-align: left;
	    color: #999;
	}
	.page .goumai {
	    width: 390px;
	    height: 62px;
	    background: #020b21;
	    position: fixed;
	    bottom: 0;
	    padding: 0 20px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.page .goumai .price {
	    font-size: 22px;
	    font-family: PingFang SC Bold,PingFang SC Bold-Bold;
	    font-weight: 700;
	    text-align: left;
	    color: #fff;
	}
	.page .goumai .btn1 {
	    background: #909399!important;
	    color: #fff;
	}
	.page .goumai .btn {
	    width: 104px;
	    height: 35px;
	    line-height: 35px;
	    background: linear-gradient(90deg,#05f9a1,#2dcaf0);
	    border-radius: 17px;
	    text-align: center;
	    font-size: 14px;
	    font-family: PingFang SC Bold,PingFang SC Bold-Bold;
	    font-weight: 700;
	    color: #222;
	}
</style>
